import React from 'react';
import Link from 'next/link';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Briefcase, Package, Settings, ArrowRight, CheckCircle, Monitor, Shield, BarChart3, Building2 } from 'lucide-react';

export default function LandingPage() {
  const portals = [
    {
        id: 'sales',
        title: '기술 영업 포털',
        description: '기술 영업 단계에서의 RFQ를 관리할 수 있는 통합 플랫폼',
        icon: Briefcase,
        color: 'from-green-500 to-emerald-500',
        // href: '/sales',
        href: '/evcp',
        features: ['벤더 관리', '기술 영업 RFQ'],
      },
    {
      id: 'purchase',
      title: '구매 포털',
      description: '협력 업체에서 부터 마지막 발주까지 원스톱 구매 솔루션',
      icon: Package,
      color: 'from-blue-500 to-indigo-500',
      // href: '/procurement',
      href: '/evcp',
      features: ['협력 업체 관리', '구매 관리'],
    },
    {
      id: 'design',
      title: '설계 포털',
      description: '벤더가 플랫폼을 통해 데이터와 문서를 제출할 수 있게 하고 TBE를 처리할 수 있는 플랫폼',
      icon: Settings,
      color: 'from-purple-500 to-violet-500',
      // href: '/engineering',
      href: '/evcp',
      features: ['설계 기준정보 관리', 'TBE'],
    }
  ];

  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="relative overflow-hidden">
        <div 
          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: "url('/images/headerImg.png')"
          }}
        ></div>
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="relative container mx-auto px-4 py-16 md:py-24 text-center">
          <div className="flex items-center justify-center mb-8">
            <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold text-white leading-tight">
              Enterprise Vendor Co-work Platform
            </h1>
          </div>
          <p className="text-lg md:text-xl lg:text-2xl text-white max-w-4xl mx-auto leading-relaxed mb-8">
            통합된 비즈니스 솔루션으로 구매부터 설계까지, 
            <br className="hidden md:block" />
            모든 업무 프로세스를 하나의 플랫폼에서 관리하세요
          </p>
        </div>
      </header>

      {/* Main Portal Selection */}
      <main className="container mx-auto px-4 py-12 md:py-20">
        <div className="flex flex-col max-w-7xl mx-auto ">
          <div className="flex flex-col items-left justify-center" >
        <div className="text-left mb-12 md:mb-16">
          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-slate-800 mb-4">
            포털을 선택하세요
          </h2>
          <p className="text-base md:text-lg text-slate-600 max-w-2xl leading-relaxed">
            각 포털은 특화된 기능과 도구를 제공하여 업무 효율성을 극대화합니다
          </p>
        </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-7xl mx-auto">
          {portals.map((portal) => {
            const Icon = portal.icon;
            return (
              <Link key={portal.id} href={portal.href} className="block">
                <Card className="relative group cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-xl bg-white border-slate-200 overflow-hidden h-full">
                  <div className={`absolute inset-0 bg-gradient-to-br ${portal.color} opacity-0 group-hover:opacity-5 transition-opacity duration-300`}></div>
                  
                  <CardHeader className="relative pb-3">
                    <div className="flex items-start justify-between mb-4">
                      <div className={`w-12 h-12 md:w-14 md:h-14 rounded-lg bg-gradient-to-br ${portal.color} flex items-center justify-center group-hover:scale-110 transition-transform duration-300 flex-shrink-0`}>
                        <Icon className="h-6 w-6 md:h-7 md:w-7 text-white" />
                      </div>
                    </div>
                    <CardTitle className="text-xl md:text-2xl font-bold text-slate-800 text-left group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 group-hover:bg-clip-text transition-all duration-300 mb-2">
                      {portal.title}
                    </CardTitle>
                    <CardDescription className="text-slate-600 text-sm md:text-base leading-relaxed text-left">
                      {portal.description}
                    </CardDescription>
                  </CardHeader>
                  
                  <CardContent className="relative pt-0">
                    <div className="mb-6">
                      <h4 className="font-semibold text-slate-700 mb-3 text-sm md:text-base text-left">주요 기능</h4>
                      <div className="space-y-2">
                        {portal.features.map((feature, idx) => (
                          <div key={idx} className="flex items-center text-sm text-slate-600">
                            <div className={`w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-gradient-to-r ${portal.color} mr-3 flex-shrink-0`}></div>
                            <span className="text-xs md:text-sm text-left">{feature}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                    
                    <div className="flex justify-end">
                      <Button className={`bg-gradient-to-r ${portal.color} hover:opacity-90 text-white border-0 group-hover:shadow-lg transition-all duration-300 text-sm px-6 py-2`}>
                        접속하기
                        <ArrowRight className="ml-2 h-3 w-3 md:h-4 md:w-4 group-hover:translate-x-1 transition-transform duration-300" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            );
          })}
        </div>

        {/* Additional Info Section */}
        <div className="mt-16 md:mt-20 flex flex-col md:flex-row gap-8 md:gap-12">
          {/* Left Section - Text Content */}
          <div className="flex-1 text-left">
            <div className="bg-white mt-12 rounded-lg">
              <h3 className="text-xl md:text-2xl lg:text-3xl font-bold text-slate-800 mb-4">
                모든 포털이 연동됩니다
              </h3>
              <p className="text-sm md:text-base lg:text-lg text-slate-600 mb-6 md:mb-8 leading-relaxed">
                구매, 영업, 설계 포털 간의 데이터가 
                <br className="hidden md:block" />
                실시간으로 동기화되어 효율적인 업무 협업이 가능합니다
              </p>
            </div>
          </div>
          
          {/* Right Section - Feature Icons */}
          <div className="flex-1">
            <div className="grid grid-cols-2 gap-3 md:gap-4">
              <div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6">
                <CheckCircle className="h-8 w-8 md:h-12 md:w-12 text-green-500 mb-2 flex-shrink-0" />
                <span className="text-xs md:text-sm text-slate-700 text-center">실시간 동기화</span>
              </div>
              <div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6">
                <Monitor className="h-8 w-8 md:h-12 md:w-12 text-blue-500 mb-2 flex-shrink-0" />
                <span className="text-xs md:text-sm text-slate-700 text-center">통합 대시보드</span>
              </div>
              <div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6">
                <Settings className="h-8 w-8 md:h-12 md:w-12 text-purple-500 mb-2 flex-shrink-0" />
                <span className="text-xs md:text-sm text-slate-700 text-center">권한 관리</span>
              </div>
              <div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6">
                <Shield className="h-8 w-8 md:h-12 md:w-12 text-yellow-500 mb-2 flex-shrink-0" />
                <span className="text-xs md:text-sm text-slate-700 text-center">보안 인증</span>
              </div>
            </div>
          </div>
        </div>
        </div>
      </main>
      
      {/* Footer */}
      <footer className="bg-slate-800 text-white py-8 md:py-12 mt-16 md:mt-20">
        <div className="container mx-auto px-4 text-center">
          <div className="flex flex-col items-center justify-center mb-4 md:mb-6">
            <div className="flex items-center justify-center">
              <img 
                src="/images/samsung_logo.png" 
                alt="삼성중공업 로고" 
                className="h-8 w-auto md:h-10 mr-2"
              />
              <span className="text-lg md:text-xl font-semibold">삼성중공업 <span className="font-normal">eVCP</span></span>
            </div>
            <div className="text-sm md:text-base text-slate-300 mt-2">
              Enterprise Vendor Co-work Platform
            </div>
          </div>
          <p className="text-slate-400 text-xs md:text-sm">
            © 2025 삼성중공업. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  
  );
}